/* flex布局 */
.flex {
	display: flex;
}

/* 纵向对齐内容 */
.justify-normal {
	justify-content: normal;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.justify-evenly {
	justify-content: space-evenly;
}

.justify-stretch {
	justify-content: stretch;
}

/* 横向对齐内容 */
.content-normal {
	align-content: normal;
}

.content-center {
	align-content: center;
}

.content-start {
	align-content: flex-start;
}

.content-end {
	align-content: flex-end;
}

.content-between {
	align-content: space-between;
}

.content-around {
	align-content: space-around;
}

.content-evenly {
	align-content: space-evenly;
}

.content-baseline {
	align-content: baseline;
}

.content-stretch {
	align-content: stretch;
}

/* 弹性换行 */
.flex-wrap {
	flex-wrap: wrap;
}

.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

.flex-nowrap {
	flex-wrap: nowrap;
}


.align-center {
	align-items: center;
}

/* 弹性方向 */
.flex-row {
	flex-direction: row;
}

.flex-row-reverse {
	flex-direction: row-reverse;
}

.flex-col {
	flex-direction: column;
}

.flex-col-reverse {
	flex-direction: column-reverse;
}

/* 弹性 */
.flex-1 {
	flex: 1 1 0%;
}

.flex-auto {
	flex: 1 1 auto;
}

.flex-initial {
	flex: 0 1 auto;
}

.flex-none {
	flex: none;
}

/* 弹性增长 */

.grow {
	flex-grow: 1;
}

.grow-0 {
	flex-grow: 0;
}

/* 弹性收缩 */
.shrink {
	flex-shrink: 1;
}

.shrink-0 {
	flex-shrink: 0;
}

/* 文本溢出 */
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-ellipsis {
	text-overflow: ellipsis;
}

.text-clip {
	text-overflow: clip;
}

.truncates {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.truncates-1 {
	-webkit-line-clamp: 1;
}

.truncates-2 {
	-webkit-line-clamp: 2;
}

.truncates-3 {
	-webkit-line-clamp: 3;
}

.truncates-4 {
	-webkit-line-clamp: 4;
}

/* 间距 */
.p-10 {
	padding: 10rpx;
}

.p-20 {
	padding: 20rpx;
}

.p-30 {
	padding: 30rpx;
}

.p-40 {
	padding: 40rpx;
}

.mt-10 {
	margin-top: 10rpx;
}

.mt-20 {
	margin-top: 20rpx;
}

.mt-30 {
	margin-top: 30rpx;
}

.mt-40 {
	margin-top: 40rpx;
}

.mr-10 {
	margin-right: 10rpx;
}

.mr-20 {
	margin-right: 20rpx;
}

.mr-30 {
	margin-right: 30rpx;
}

.mr-40 {
	margin-right: 40rpx;
}

.ml-10 {
	margin-left: 10rpx;
}

.ml-20 {
	margin-left: 20rpx;
}

.ml-30 {
	margin-left: 30rpx;
}

.ml-40 {
	margin-left: 40rpx;
}

.mb-10 {
	margin-bottom: 10rpx;
}

.mb-20 {
	margin-bottom: 20rpx;
}

.mb-30 {
	margin-bottom: 30rpx;
}

.mb-40 {
	margin-bottom: 40rpx;
}

 